<template>
  <div class="about">
    <h2>电力负荷实时监控</h2>
    <div class="button-container">
      <button
          :class="active === item.id ? 'active' : 'button'"
          v-for="item in boxList"
          :key="item.id"
          @click="handleClick(item)"
      >
        {{ item.name }}
      </button>
    </div>
    <div class="boxList" >
<!--      <EchartsVue-->
<!--        class="CHART"-->
<!--        v-for="item in boxList"-->
<!--        :key="item.id"-->
<!--        :type="item.type"-->
<!--        :msg="item.name"-->
<!--        :current="item.current"-->
<!--        :value="item.value"-->
<!--        :max="item.max"-->
<!--      ></EchartsVue>-->
      <EchartsVue style="margin-top: 2rem" :type="type1" :msg="msg1" :current="current1" :value="value1" :max="max1"></EchartsVue>
      <EchartsVue style="margin-top: 2rem" :type="type2" :msg="msg2" :current="current2" :value="value2" :max="max2"></EchartsVue>
      <EchartsVue style="margin-top: 2rem" :type="type3" :msg="msg3" :current="current3" :value="value3" :max="max3"></EchartsVue>
      <EchartsVue style="margin-top: 2rem" :type="type4" :msg="msg4" :current="current4" :value="value4" :max="max4"></EchartsVue>
    </div>
  </div>
</template>
<script>
import EchartsVue from "@/components/Echarts.vue";
import {getAllPower} from "@/api/echartApi";
export default {
  name: "About",
  components: {
    EchartsVue,
  },
  data() {
    return {
      boxList: [],
      buttonList: [],
      active: 0,
      type1: "AH1_IPA",
      type2: "AH5_IPA",
      type3: "AH6_IPA",
      type4: "AH7_IPA",
      msg1: "总进线",
      msg2: "450变压器",
      msg3: '放电变压器',
      msg4: '分离变压器',
      current1: "202.1A",
      current2: '72.2A',
      current3: '72.2A',
      current4: '57.7A',
      value1: 202.1,
      value2: 72.2,
      value3: 72.2,
      value4: 57.7,
      max1: 202.1,
      max2: 100,
      max3: 100,
      max4: 80,
      ready: false,
      Data1:[],
      Data2: [],
      Data3: [],
      Data4: []
    };
  },
  created() {
    this.boxList = this.$store.state.btnList;

    this.getData()
  },
  methods: {
    handleClick(item) {
      console.log(item);
      // this.type = item.type;
      // this.msg = item.name;
      // this.current = item.current;
      // this.value = item.value;
      // this.active = item.id;
      // this.max = item.max
      // this.$stote.commit('setFlag', false)
      this.$router.push({
        path: item.path,
        query: {
          type: item.type,
          msg: item.name,
          current: item.current,
          value: item.value,
          max: item.max
        }
      });
    },
    async getData() {
      const res = await getAllPower(this.type1);
      const res2 = await getAllPower(this.type2);
      const res3 = await getAllPower(this.type3);
      const res4 = await getAllPower(this.type4);
      this.Data1 = res.data;
      this.Data2 = res2.data;
      this.Data3 = res3.data;
      this.Data4 = res4.data;
    }
  }
};
</script>
<style scoped>
.about {
}
h2 {
  text-align: center;
}
.boxList {
  display: flex;
  justify-content: space-around;
  /* align-items: ; */
  flex-wrap: wrap;
}
.button-container {
  box-sizing: border-box;
  width: 30vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 60vw;
  //margin-bottom: 1rem;
  /* flex-wrap: nowrap; */
  //transform: translateY(-50%);
}
.button, .active {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  min-height: 2.5rem;
  border-radius: 8px;
  border: 1px solid #ccc;
  background-color: #f0f0f0;
  color: #333;
  cursor: pointer;
  text-align: center;
  margin: 0 0.25rem;
  transition: background-color 0.2s, border-color 0.2s;
}
.active {
  background-color: #86a3b3;
  border-color: #5c7a8a;
  color: white;
}
.button:hover {
  background-color: #e0e0e0;
}
@media (max-width: 1200px) and (orientation: portrait) {
  .button-container {
    width: 73vw;
    margin-left: auto;
    margin-right: auto;
    justify-content: space-around;
    flex-wrap: wrap;
  }
  .button, .active {
    flex-basis: 40%;
    margin: 0.5rem 5%;
    font-size: 1rem;
    padding: 0.6rem 0.5rem;
  }
}
@media (max-width: 1024px) and (orientation: landscape) {
  .button-container {
    width: 30vw;
    margin-left: auto;
    margin-right: auto;
    justify-content: space-around;
    flex-wrap: wrap;
  }
  .button, .active {
    flex-basis: 40%;
    margin: 0.5rem 5%;
    font-size: 1rem;
    padding: 0.6rem 0.5rem;
  }
  .boxList {
    display: flex;
    justify-content: space-around;
    /* align-items: ; */
    flex-wrap: wrap;
  }
}
.CHART {
  margin: 0.2rem 0;
}
</style>
